<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
           $("#modify").click(function(){
               let id = $("#modify").attr("data-id");
               console.log("id:"+id)
           });
        });
    </script>
</head>
<body>
<h1>Hello Thymeleaf</h1>
<hr>
<h1>取request作用域的值</h1>
<!--
    在Thymeleaf中,可以通过以下几种方法获取request作用域的值
    1.[[${key}]]:获取request作用域的值,如果值存在HTML标签,不识别标签
        而是将标签作为普通字符串展现,类似于Jquery中的text()
    2.[(${msg})]:获取request作用域的值,如果值存在HTML标签,识别标签
        直接将标签效果在页面中展现,类似于Jquery中的html()
-->
[[${msg}]]
[(${msg})]
<!--
    除了上述的两种方法以外,还有两种方法



    这两种方法是作为标签的属性存在的
    语法:
    1.<标签名 th:text="${key}"></标签名>
        该方法即为[[${key}]]用法
    2.<标签名 th:utext="${key}"></标签名>
        该方法即为[(${msg})]的用法
-->
<span th:text="${msg}"></span>
<span th:utext="${msg}"></span>
<hr>
<h1>获取session作用域的值</h1>
<!--
    想要获取session作用域的值
    表达式内容中必须指定作用域
    其表达式语法:${session.key}
-->
用户名:<span th:text="${session.user.username}"></span>
<hr>
<h1>获取application作用域的值</h1>
<!--
    想要获取application作用域的值
    表达式内容中必须指定作用域
    其表达式语法:${application.key}
-->
用户名:<span th:text="${application.user2.username}"></span>
<hr>
<h1>属性赋值</h1>
<!--
    在为属性进行赋值的时候
    如果其值是后台传递到作用域中的数据
    则属性名前加上前缀th:
-->
<a id="modify" href="javascript:;" th:data-id="${id}">删除</a>

<hr>

<h1>if判断</h1>
<!--
    if判断中,每一个if语句都是独立存在的,互不干涉
    当if表达式中,条件满足的则执行,不满足的则不执行
-->
<span th:if="${age < 5}">婴儿</span>
<span th:if="${age < 18}">少年</span>
<span th:if="${age < 30}">青年</span>
<span th:if="${age < 60}">中年</span>
<span th:if="${age >= 60}">老年</span>
<hr>
<h1>unless判断</h1>
<!--
    unless判断中,每一个unless语句都是独立存在的,互不干涉
    当unless表达式中,条件满足的则不执行,不满足的则执行
-->
<span th:unless="${age < 5}">婴儿</span>
<span th:unless="${age < 18}">少年</span>
<span th:unless="${age < 30}">青年</span>
<span th:unless="${age < 60}">中年</span>
<span th:unless="${age >= 60}">老年</span>
<hr>
<!--
    通过th:switch获取对应的数据
    case用于判断其值是否是对应的值
    如果是则执行对应标签体,执行完成之后,跳出整个判断
    如果都不满足,可以使用*匹配其他所有,相当于otherwise
-->
<h1>switch判断</h1>
<span th:switch="${role}">
    <!--<span th:case="student">学生</span>-->
    <span th:case="emp">员工</span>
    <span th:case="user">用户</span>
    <span th:case="programmer">程序员</span>
    <span th:case="businessman">商人</span>
    <span th:case="*">其他</span>
</span>

<hr>
<h1 id="users">遍历操作</h1>
<table border="1">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <!--
        在遍历操作中,对谁遍历,则在对应的标签中进行遍历
        使用th:each作为该标签的属性
        其属性值的格式主要分为两种
        1.var:items
            var:当前迭代的对象别名
            items:需要遍历的集合
        2.var,varStatus:items
            varStatus:遍历的状态
            可以通过index获取到当前迭代的索引号
    -->
    <tr th:each="user,status:${users}">
        <td>[[${status.index + 1}]]</td>
        <td>[[${user.id}]]</td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.address}"></td>
        <td>
            <a href="#modifyUser">修改</a>
            <a href="javascript:;" onclick="return confirm('是否确认删除')">删除</a>
        </td>
    </tr>
</table>

<h1 id="modifyUser">修改用户信息</h1>
<form action="">
编号:<input type="text" th:value="${user.id}" readonly><br>
用户名:<input type="text" th:value="${user.username}"><br>
密码:<input type="password" th:value="${user.password}"><br>
电话:<input type="text" th:value="${user.phone}"><br>
地址:<input type="text" th:value="${user.address}"><br>
</form>

<h1>修改用户信息</h1>
<form action="">
编号:<input type="text" th:field="${user.id}" readonly><br>
用户名:<input type="text" th:field="${user.username}"><br>
密码:<input type="password" th:field="${user.password}"><br>
电话:<input type="text" th:field="${user.phone}"><br>
地址:<input type="text" th:field="${user.address}"><br>
</form>

<h1>修改用户信息</h1>
<form action="" th:object="${user}">
编号:<input type="text" th:field="*{id}" readonly><br>
用户名:<input type="text" th:field="*{username}"><br>
密码:<input type="password" th:field="*{password}"><br>
电话:<input type="text" th:field="*{phone}"><br>
地址:<input type="text" th:field="*{address}"><br>
</form>

</body>
</html>